<template>
	<div class="wdxq2" :style="{'min-height':Height-73+'px'}">
		<div class="wdxq_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 2.4rem;" @click="fh"></i>
			<span class="flex1">意见反馈</span>
			<span style="float: right;margin-right: 4%;font-size: 1.5rem;" @click="subFeedback">提交</span>
		</div>
		<div class="dtjb clear2">
			<el-input
			  type="textarea"
			  placeholder="请输入您发现的系统问题或意见反馈，我们会及时处理，感谢您的支持。"
			  v-model="reason"
			  style='border: 0;text-indent: 0;'
			  :maxlength='500'
			  >
			</el-input>
			<span style="font-size: 1.5rem;float: right;color: #666;">{{reason.length}}/500</span>
		</div>
		<div class="wdxq_div4" style="padding:1rem 5%  ;background: #fff;margin: 0;text-align: left;">
			<p class="wdxq_div4p2" style=";text-indent: 0;text-align: justify;">图片（选填，提供问题截图）</p>
			<div style="width: 100%;margin-top: 1rem;" class="dtdatil_img clear2">
				<el-upload
				  :action="defines.uploadFeedbackImg"
				  list-type="picture-card"
				  :on-success="handlePictureCardPreview"
				  :on-remove="handleRemove"
				  :data='aaa'
				  multiple
				  :before-upload='beforeupload'
				  name='img_file'>
				  <i class="el-icon-plus" style="line-height: 80px;"></i>
				</el-upload>
			</div>
		</div>
		
		

	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data: function() {
			return {
				aaa:{
					'uid':window.uid	
				},
				dialogImageUrl: '',
        		dialogVisible: false,
        		dat_img:[],
				reason:'',
				Height:0,
				tabI:0,

			}
		},
		mounted() {
			this.Height=document.body.offsetHeight;
		},
		methods: {
			subFeedback(){
				let img_html=[];
				for(let i in this.dat_img){
					img_html.push(this.dat_img[i].img_url)
				}
				this.$http.post(this.defines.subFeedback, {
						uid: window.uid,
						content:this.reason,
						img_url:img_html
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								Toast('反馈成功');
								this.fh();
							}
						},
						(error) => {
							console.log(error);
						}
					);
			},
			fh(){
        		window.history.go(-1);
        	},
        	beforeupload(file){
				console.log(file);
				if(this.dat_img.length==9){
					Toast('最多上传9张图片');
					return false;
				}
			},
			handleRemove(file, fileList) {
				this.dat_img=[];
				for(let i in fileList){
					this.dat_img.push(fileList[i].response.data.img_list[0])
				}
		        
		      },
	      handlePictureCardPreview(response, file, fileList) {
	      	this.dat_img.push(file.response.data.img_list[0])
	        
	      },
		}
	}
</script>
<style scoped="scoped">
	.dtjb {
		width: 92%;
		background: #fff;
		color: #000;
		font-size: 1.5rem;
		padding: 3% 4%;
		border-bottom: 1px solid #f1f1f1;
	}
</style>
<style>
	.dtjb textarea{
		border: 0px !important;
		min-height: 100px !important;
		padding: 0 !important;
		
	}
	.wdxq2 .el-upload--picture-card{
		width: 80px;
		height: 80px;
		line-height: 80px;
	}
	.wdxq2 .el-upload-list--picture-card .el-upload-list__item{
		width: 80px;
		height: 80px;
	}
	.wdxq2 .el-progress-circle{
		width: 70px !important;
		height: 70px !important;
	}
	.wdxq2 .el-upload-list--picture-card .el-progress{
		width: 70px !important;
	}
	.el-upload-list--picture-card .el-upload-list__item-thumbnail{
		object-fit: cover;
	}
	.dtdatil_img .el-icon-delete{
		display: block !important;	
	    text-align: right;
	    color: #fff;
	    font-size: 12px;
	    margin-top: 4px;
	}
	.dtdatil_img .el-upload-list__item-delete{
		display: block !important;
	}
	.dtdatil_img .el-upload-list__item-actions{
		opacity: 1 !important;
		background: transparent;
	}
	.dtdatil_img .el-icon-check{
		display: none !important;
	}
	.dat_imghide .el-upload--picture-card{
		display: none !important;
	}
</style>